<template>
  <ArtTableFullScreen>
    <div id="table-full-screen">
      <el-card shadow="never" class="art-table-card">
        <ArtTableHeader
          :columnList="columnOptions"
          v-model:columns="columnChecks"
          @refresh="handleRefresh"
        >
          <template #left>
            <ElButton :icon="Plus" @click="showDialog('add')">新增</ElButton>
          </template>
        </ArtTableHeader>
        <art-table
          :data="tableData"
          :loading="loading"
          v-model:currentPage="queryParams.page"
          v-model:pageSize="queryParams.size"
          :total="total"
          @size-change="getTableData"
          @current-change="getTableData"
        >
          <template #default>
            <el-table-column v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
          </template>
        </art-table>
        <el-dialog
          v-model="dialogVisible"
          :title="dialogType === 'add' ? '添加FAQ' : '编辑FAQ'"
          width="40%"
        >
          <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<!--            <el-form-item label="名称" prop="title">-->
<!--              <el-input v-model="formData.title" placeholder="请输入FAQ名称" />-->
<!--            </el-form-item>-->
            <el-form-item label="问题" prop="title">
              <el-input v-model="formData.title" placeholder="请输入FAQ问题" />
            </el-form-item>
            <el-form-item label="答案" prop="content">
              <el-input
                type="textarea"
                v-model="formData.content"
                :autosize="{ minRows: 6, maxRows: 10 }"
                placeholder="请输入FAQ答案"
              />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="formData.sort" :min="1" style="width: 100%" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="handleSubmit">提交</el-button>
            </div>
          </template>
        </el-dialog>
      </el-card>
    </div>
  </ArtTableFullScreen>
</template>

<script setup lang="ts">
  import { ElButton, FormInstance, type FormRules } from 'element-plus'
  import { ElMessageBox, ElMessage } from 'element-plus'
  import { useCheckedColumns } from '@/composables/useCheckedColumns'
  import { Plus, Delete, Edit } from '@element-plus/icons-vue'
  import { ContentService } from '@/api/common'

  const loading = ref(false)
  const tableData = ref<any>([])
  const dialogVisible = ref(false)
  const dialogType = ref('add')
  const formData = reactive({
    title: '',
    content: '',
    sort: 1,
    cate_id: 31
  })

  const total = ref(0)
  const queryParams = reactive({
    page: 1,
    size: 10,
    cate_id: 31
  })

  onMounted(() => {
    getTableData()
  })

  // 刷新
  const handleRefresh = () => {
    getTableData()
  }
  // 列配置
  const columnOptions = [
    // { label: '序号', prop: 'index' },
    // { label: '排序', prop: 'sort' },
    { label: 'ID', prop: 'id' },
    { label: '问题', prop: 'title' },
    { label: '答案', prop: 'content' },
    { label: '创建日期', prop: 'create_time' },
    { label: '操作', prop: 'operation' }
  ]
  // 动态列配置
  const { columnChecks, columns } = useCheckedColumns(() => [
    // { type: 'index', label: '序号', width: 80, align: 'center' }, // 序号列
    { prop: 'id', label: 'ID', align: 'center', width: 80 },
    // { prop: 'title', label: '标题', align: 'center' },
    { prop: 'title', label: '问题', align: 'center' },
    { prop: 'content', label: '答案', align: 'center', showOverflowTooltip: true },
    { prop: 'create_time', label: '创建日期', sortable: true, align: 'center' },
    {
      prop: 'operation',
      label: '操作',
      width: 220,
      align: 'center',
      fixed: 'right', // 固定在右侧
      // disabled: true,
      formatter: (row: any) => {
        return h('div', { class: 'option' }, [
          h(
            ElButton,
            {
              icon: Edit,
              size: 'small',
              text: true,
              onClick: () => showDialog('edit', row)
            },
            () => '编辑'
          ),
          h(
            ElButton,
            {
              icon: Delete,
              type: 'danger',
              size: 'small',
              text: true,
              onClick: () => deleteTableRow(row)
            },
            () => '删除'
          )
        ])
      }
    }
  ])

  const showDialog = (type: string, row?: any) => {
    dialogVisible.value = true
    dialogType.value = type

    if (type === 'edit' && row) {
      // formData.title = row.title
      formData.title = row.title
      formData.content = row.content
      formData.id = row.id
    } else {
      formData.title = ''
      formData.content = ''
      formData.id = ''
    }
  }

  const rules = reactive<FormRules>({
    title: [{ required: true, message: '请输入FAQ问题', trigger: 'blur' }],
    content: [{ required: true, message: '请输入FAQ答案', trigger: 'blur' }]
  })

  // 获取商品列表
  const getTableData = async () => {
    loading.value = true
    const res = await ContentService.getListContent(queryParams)
    total.value = res.data.total
    tableData.value = res.data.data
    loading.value = false
  }

  const deleteTableRow = (row: any) => {
    ElMessageBox.confirm('确定要删除该列吗？', '删除列表', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    })
      .then(() => {
        return ContentService.deleteContent(row.id)
      })
      .then(() => {
        getTableData()
        ElMessage.success('删除成功')
      })
  }

  const formRef = ref<FormInstance>()
  const handleSubmit = async () => {
    if (!formRef.value) return

    await formRef.value.validate(async (valid) => {
      if (valid) {
        if (dialogType.value === 'add') {
          await ContentService.addContent(formData)
        } else {
          await ContentService.updateContent(formData)
        }
        await getTableData()
        ElMessage.success(dialogType.value === 'add' ? '添加成功' : '更新成功')
        dialogVisible.value = false
      }
    })
  }
</script>

<style lang="scss" scoped>
  :deep(.option .el-button + .el-button) {
    margin-left: 0;
  }
</style>
